<template>
<el-tabs tab-position="left" style="margin: 20px 0 0 0;min-width: 400px;min-height: 300px; " class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="地区人员分布" style="margin: 20px 0 0 0;min-width: 400px;min-height: 300px; " value="1">
      <template #label>
        <span class="custom-tabs-label">
          <span>地区人员分布</span>
        </span>
      </template>
      <regionalDistribution1 :dataList="dataList1" :showFlag="show" style="width:100%;highttext-align:center" ref="echart1"></regionalDistribution1>
    </el-tab-pane>
    <el-tab-pane label="地区人员分布" style="margin: 20px 0 0 0;min-width: 400px;min-height: 300px; " value="2">
      <template #label>
        <span class="custom-tabs-label">
          <span>部门人员分布</span>
        </span>
      </template>
      <regionalDistribution2 :dataList="dataList2" :show="show" style="width:100%;text-align:center" ref="echart2"></regionalDistribution2>
	  </el-tab-pane>
  </el-tabs>
</template>


<script setup>
import {ref, onMounted,onBeforeMount, reactive,watch} from "vue";
import { Timer } from '@element-plus/icons-vue';
import {useRouter} from "vue-router";
import { ElMessage } from 'element-plus'
import regionalDistribution1 from './components/regionalDistribution1'
import regionalDistribution2 from './components/regionalDistribution2'
import { getRegionalDistribution1,getRegionalDistribution2 } from "@/api/report";

const now = new Date();
const year = now.getFullYear();
// 获取当前月份（注意：月份从0开始，所以需要加1）
const month = now.getMonth() == 0? 12:now.getMonth()+1;
// 格式化为 YYYY-MM 形式
const yearMonth = `${year}-${month < 10 ? '0' : ''}${month}`;

var value2 = ref(yearMonth);

onBeforeMount(()=>{
	begin();
})

const dataList1 = ref([]);
const dataList2 = ref([]);

const begin = ()=>{
	var time = value2.value
	getRegionalDistribution1({time}).then((data) => {
			dataList1.value = data.data[0];
	});
	getRegionalDistribution2({time}).then((data) => {
			dataList2.value = data.data[0];
	});
}

const show = ref();

const handleClick = (tab, event)=> {
    show.value=tab.index
	echart1.value.handleResize()
}

</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.button{
  margin-left:205px;
  float: left;
}
</style>